<template>
  <div>

    <el-row :gutter="32">
      <el-col :lg="8">

        <div class="   ml20 mt40 classflex-left ">
          <div class="grid-content bg-purple-dark  ml20  text-size-23-w700  ">批量调整排课</div>
        </div>

        <div class="   ml20 mt40 classflex-left ">
          <div class="text-gray  ml20  text-size-16  ">仅支持未开始课节批量操作</div>
        </div>
        <el-divider></el-divider>
        <div class=" classflex-space-between ml30">
          <!-- {{queryParams}} -->

          <el-form :model="queryParams" ref="queryForm" label-width="80px">
            <div>
              <el-form-item label="时间段">
                <el-date-picker v-model="dateRange" style="width: 360px" value-format="yyyy-MM-dd" type="daterange"
                  range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="星期" prop="classWorkOut">


                <el-select v-model="classWorkOut" multiple placeholder="请选择周几排课" style="width: 360px;"
                  @change="replacePerChange($event)">
                  <el-option v-for="dict in dict.type.week_day" :key="dict.value" :label="dict.label"
                    :value="dict.value">
                  </el-option>
                </el-select>


              </el-form-item>
            </div>

            <div>
              <el-form-item label="上课课程" prop="courseName">

                <el-select style="width: 360px;" v-model="courseName" placeholder="请选择报名课程" filterable
                  @change="ChangeCourseName">
                  <el-option v-for="dict in courseList" :key="dict.id" :label="dict.courseName"
                    :value="dict.courseName">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <!-- <div>
              <el-form-item label="上课班级" prop="className">
                <el-select v-model="className" placeholder="请选择班级" filterable>
                  <el-option v-for="dict in schoolclassList" :key="dict.id" :label="dict.className"
                    :value="dict.className">
                  </el-option>
                </el-select>
              </el-form-item>
            </div> -->
            <div class="">
              <el-form-item label="上课教师" prop="teacher">


                <el-select style="width: 360px;" v-model="teacher" placeholder="请选择上课教师" filterable>
                  <el-option v-for="dict in userList2" :key="dict.id" :label="dict.nickName" :value="dict.nickName">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="">
              <el-form-item label="考勤员" prop="classAttendant">
                <el-select style="width: 360px;" v-model="classAttendant" placeholder="请选择考勤员" filterable>
                  <el-option v-for="dict in userList2" :key="dict.id" :label="dict.nickName" :value="dict.nickName">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="">
              <el-form-item label="教室" prop="classRoom">
                <el-select style="width: 360px;" v-model="classRoom" placeholder="请选择教室" filterable>
                  <el-option v-for="dict in classroomList" :key="dict.id" :label="dict.classroomName"
                    :value="dict.classroomName">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <el-divider></el-divider>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" style="width: 300px;" @click="getList">确定</el-button>

            </el-form-item>
          </el-form>
        </div>
      </el-col>



      <el-col :lg="16">
        <div class="mt50">
          <div class="classflex-left">
            <div>
              <el-dropdown trigger="click" @command='handleCommand'>
                <el-button type="primary" :disabled="can">
                  批量操作<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1">批量修改上课时间/课时数</el-dropdown-item>
                  <el-dropdown-item command="2">批量延后</el-dropdown-item>
                  <el-dropdown-item command="3">批量修改授课教师</el-dropdown-item>
                  <el-dropdown-item command="4">批量修改考勤教师</el-dropdown-item>
                  <el-dropdown-item command="5">批量修改教室</el-dropdown-item>
                  <el-dropdown-item command="6">批量删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <!-- <div class="ml20">共找到19节课，已加载19节课，向下滚动可以加载更多数据</div> -->
          </div>
          <div style="height: 600px; margin-right: 50px;">

            <div  style="height: 80%;">
              <el-table v-loading="loading" :data="schedulingList" @selection-change="tableSelectionChange" border class="mt20">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="上课日期" align="center" prop="studyDate" width="320">
                  <template slot-scope="scope">
                    <div>
                      {{scope.row.studyDate}}({{scope.row.week}}) {{scope.row.classStart}}-{{scope.row.classFinish}}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="班级/课程" align="center" prop="className" width="220">
                  <template slot-scope="scope">
                    <div>
                      {{scope.row.className}}/{{scope.row.classCourse}}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="课时数" align="center" prop="classHours" width="60" />
                <el-table-column label="上课教室" align="center" prop="classRoom" width="80">
                  <template slot-scope="scope">
                    <div class="text-lv">
                      {{scope.row.classRoom}}
                    </div>

                  </template>
                </el-table-column>
                <el-table-column label="授课教师" align="center" prop="classTeacher" />
                <el-table-column label="考勤教师" align="center" prop="classAttendant" />
              </el-table>
            </div>
            <div>
              <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList" />
            </div>
          </div>






        </div>

      </el-col>

    </el-row>
    <div>

    </div>

    <!--1. 批量修改上课时间/课时数 -->

    <el-dialog :title="title" :visible.sync="open1" direction="rtl" width="30%" :show-close="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <div class="ml20">
          <el-form-item label="开始时间" prop="classStart">
            <el-time-picker :value-format="pickerFormatText" :format="pickerFormatText" style="width: 360px;"
              v-model="form.classStart" :picker-options="{
                       selectableRange: '00:00:00 - 23:59:59', format: pickerFormatText
                     }" placeholder="开始时间">
            </el-time-picker>
          </el-form-item>
          <el-form-item label="结束时间" prop="classFinish">
            <el-time-picker :value-format="pickerFormatText" :format="pickerFormatText" style="width: 360px;"
              v-model="form.classFinish" :picker-options="{
                        selectableRange: '00:00:00 - 23:59:59', format: pickerFormatText
                      }" placeholder="结束时间">
            </el-time-picker>
          </el-form-item>
          <el-form-item label="课时数" prop="classHours">
            <el-input-number v-model="form.classHours" :min="1" :max="10" label="描述文字" controls-position="right"></el-input-number>
          </el-form-item>
        </div>
      </el-form>
      <div class="ml20 mr20 mt20">
        <el-button type="primary" @click="submitForm(1)">确定</el-button>
        <el-button @click="cancel(1)">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 2.批量延后 -->

    <el-dialog :title="title" :visible.sync="open2" direction="rtl" width="30%" :show-close="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">



        <el-form-item label="延后天数" prop="">
          <el-input-number v-model="form.data3" :min="1" :max="10" label="描述文字" controls-position="right"></el-input-number>
        </el-form-item>

      </el-form>
      <div class="ml20 mr20 mt20">
        <el-button type="primary" @click="submitForm(2)">确定</el-button>
        <el-button @click="cancel(2)">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 3.批量修改上课教师 -->
    <el-dialog :title="title" :visible.sync="open3" direction="rtl" width="30%" :show-close="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">



        <el-form-item label="授课教师" prop="classTeacher">
          <el-select style="width: 350px;" multiple v-model="form.classTeacher" placeholder="请选择授课教师" filterable>
            <el-option v-for="dict in userList" :key="dict.userId" :label="dict.nickName" :value="dict.nickName">
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div class="ml20 mr20 mt20">
        <el-button type="primary" @click="submitForm(3)">确定</el-button>
        <el-button @click="cancel(3)">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 4.批量修改考勤教师 -->
    <el-dialog :title="title" :visible.sync="open4" direction="rtl" width="30%" :show-close="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">


        <el-form-item label="考勤教师" prop="classAttendant">
          <el-select style="width: 350px;" v-model="form.classAttendant" placeholder="请选择考勤教师" filterable>
            <el-option v-for="dict in userList" :key="dict.userId" :label="dict.nickName" :value="dict.nickName">
            </el-option>
          </el-select>
        </el-form-item>


      </el-form>
      <div class="ml20 mr20 mt20">
        <el-button type="primary" @click="submitForm(4)">确定</el-button>
        <el-button @click="cancel(4)">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 5.批量修改教室 -->
    <el-dialog :title="title" :visible.sync="open5" direction="rtl" width="30%" :show-close="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">


        <el-form-item label="上课教室" prop="classRoom">
          <el-select style="width: 350px;" v-model="form.classRoom" placeholder="请输入上课教室" filterable>
            <el-option v-for="dict in classroomList" :key="dict.userId" :label="dict.classroomName"
              :value="dict.classroomName">
            </el-option>
          </el-select>
        </el-form-item>


      </el-form>
      <div class="ml20 mr20 mt20">
        <el-button type="primary" @click="submitForm(5)">确定</el-button>
        <el-button @click="cancel(5)">取 消</el-button>
      </div>
    </el-dialog>


  </div>

</template>

<script>
  import {
    listSchoolclass,
    getSchoolclass,
    delSchoolclass,
    addSchoolclass,
    updateSchoolclass
  } from "@/api/schoolclass/schoolclass";
  import {
    listClassroom,
    getClassroom,
    delClassroom,
    addClassroom,
    updateClassroom
  } from "@/api/classroom/classroom";
  import {
    listScheduling,
    getScheduling,
    delScheduling,
    addScheduling,
    updateScheduling
  } from "@/api/scheduling/scheduling";

  import {
    listCourse,
    getCourse,
    delCourse,
    addCourse,
    updateCourse
  } from "@/api/course/course";
  import {

    getCount,
    listStudent,
    getStudent,
    delStudent,
    addStudent,
    updateStudent
  } from "@/api/student/student";
  import {
    listOrder,
    getOrder,
    delOrder,
    addOrder,
    updateOrder
  } from "@/api/order/order";
  import {
    listUser,
    listUser2,
    getUser,
    delUser,
    addUser,
    updateUser,
    resetUserPwd,
    changeUserStatus,
    deptTreeSelect
  } from "@/api/system/user";
  export default {
    name: "Changescheduing",
    dicts: ['week_day'],
    data() {
      return {
        pickerFormatText: 'HH:mm',
        can: true,
        schoolclassList: [],

        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 上课记录表格数据
        classrecordsList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          deptId: null,
          className: null,
          classCourse: null,
          classCapacity: null,
          classAskforleave: null,
          classNoyet: null,
          classWorkOut: null,
          classCirculate: null,
          classStart: null,
          classFinish: null,
          classHours: null,
          classTeacher: null,
          classAttendant: null,
          classRoom: null,
          classStudent: null,
          remark2: null,
          remark3: null,
          remark4: null,
          remark5: null,
          remark6: null,
          remark7: null,
          remark8: null,
          remark9: null,
          remark10: null
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
        // 日期范围
        dateRange: [],

        queryParamsCourse: {},
        queryParamsTeacher: {},
        queryParamsStudent: {},
        queryParamsClassroom: {},
        queryParamsSchool: {},
        // 学生信息表格数据
        studentList: [],
        courseList: [],
        userList: [],
        userList2: [],
        schedulingList: [],
        classroomList: [],
        open1: false,
        open2: false,
        open3: false,
        open4: false,
        open5: false,
        courseName: "",
        teacher: "",
        classAttendant: "",
        classRoom: "",
        classWorkOut:null,
      };
    },
    watch: {
      'classWorkOut': {
        handler() {

          if (this.classWorkOut != null && this.classWorkOut.length > 0) {
            this.queryParams.data2 = this.classWorkOut.join(',');
            // delete this.queryParams.classWorkOut;
          }else{
              this.queryParams.data2 =null
          }

        }
      },


      'courseName': {
        handler() {
          // console.log("1111111111111");
          // this.queryParams.courseName = this.courseName;
          if (this.courseName == "全部课程") {
           this.queryParams.classCourse = null;
          } else {
           this.queryParams.classCourse = this.courseName;
          }

        }
      },
      'teacher': {
        handler() {


          if (this.teacher == "全部教师") {
           this.queryParams.teacher = null;
          } else {
           this.queryParams.teacher = this.teacher;
          }

        }

      },
      'classAttendant': {
        handler() {
          if (this.classAttendant == "全部教师") {
           this.queryParams.classAttendant = null;
          } else {
           this.queryParams.classAttendant = this.classAttendant;
          }


        }
      },
      'classRoom': {
        handler() {
          if (this.classRoom == "全部教室") {
           this.queryParams.classRoom = null;
          } else {
          this.queryParams.classRoom =this. classRoom;
          }

        }
      },

    },
    created() {

      this.getStudentList();
      this.getCourseList();
      this.getTeacherList();
      this.getClassroomList();
      this.getList();
      this.courseName = "全部课程";
      this.teacher = "全部教师";
      this.classAttendant = "全部教师";
      this.classRoom = "全部教室";


    },
    methods: {

      // 多选框选中数据
      tableSelectionChange(selection) {
        if (selection.length == 0) {
          this.can = true;
        } else {
          this.can = false;
        }

        this.ids = selection.map(item => item.id);
        console.log(this.ids);



      },
      // 取消按钮
      cancel(item) {
        if (item == 1) {

          this.open1 = false;
        } else if (item == 2) {
          this.open2 = false;
        } else if (item == 3) {
          this.open3 = false;
        } else if (item == 4) {
          this.open4 = false;
        } else if (item == 5) {
          this.open5 = false;
        } else if (item == 6) {

        }
        this.reset2();
      },
      // 确定按钮
      submitForm(item) {


        let arr = this.ids.join(','); // 使用空格作为分隔符
        this.form.data1 = arr;

        if (this.form.classTeacher != null && this.form.classTeacher.length != 0) {
          this.form.classTeacher = this.form.classTeacher.join(',');

        }

        this.$refs["form"].validate(valid => {
          if (valid) {
            //修改信息
            this.form.deptId = this.$store.state.user.deptId;

            updateScheduling(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              if (item == 1) {
                this.open1 = false;
              } else if (item == 2) {
                this.open2 = false;
              } else if (item == 3) {
                this.open3 = false;
              } else if (item == 4) {
                this.open4 = false;
              } else if (item == 5) {
                this.open5 = false;
              }
              this.getList();
              this.reset2();
            });


          }
        });
      },


      handleCommand(item) {
        if (item == 1) {
          this.title = "批量修改上课时间/课时数"
          this.open1 = true;
        } else if (item == 2) {
          this.form.state = 1;
          this.title = "批量延后"
          this.open2 = true;
        } else if (item == 3) {
          this.title = "批量修改上课教师"
          this.open3 = true;
        } else if (item == 4) {
          this.title = "批量修改考勤教师"
          this.open4 = true;
        } else if (item == 5) {
          this.title = "批量修改教室"
          this.open5 = true;
        } else if (item == 6) {
          const ids = this.ids;
          this.$modal.confirm('是否确定批量删除?删除后无法恢复，请谨慎操作！').then(function() {
            return delScheduling(ids);
          }).then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          }).catch(() => {});



        }

      },
      replacePerChange(val) {
        this.$forceUpdate()
      },
      ChangeCourseName(classCourse) {


        this.$set(this.queryParams, 'className', null)

        this.getSchoolclassList(classCourse)
      },
      /** 查询班级列表 */
      getSchoolclassList(classCourse) {
        this.queryParamsSchool.classCourse = classCourse;
        this.queryParamsSchool.deptId = this.$store.state.user.deptId;
        listSchoolclass(this.queryParamsSchool).then(response => {
          this.schoolclassList = response.rows;

        });
      },


      getClassroomList() {

        this.queryParamsClassroom.deptId = this.$store.state.user.deptId;
        listClassroom(this.queryParamsClassroom).then(response => {
          // this.classroomList = response.rows;
          this.classroomList.push({
            "id": "100",
            "classroomName": "全部教室"
          })
          this.classroomList.push(...response.rows)

        });
      },

      getTeacherList() {

        this.queryParamsTeacher.deptId = this.$store.state.user.deptId;
        
        listUser2(this.queryParamsTeacher).then(response => {
          this.userList = response.rows;
          this.userList2.push({
            "id": "100",
            "nickName": "全部教师"
          })
          this.userList2.push(...response.rows)

        });
      },
      /** 查询课程管理列表 */
      getCourseList() {
        this.queryParamsCourse.deptId = this.$store.state.user.deptId;
        listCourse(this.queryParamsCourse).then(response => {
          // this.courseList = response.rows;
          this.courseList.push({
            "id": "100",
            "courseName": "全部课程"
          })
          this.courseList.push(...response.rows)

        });
      },
      /** 查询学生信息列表 */
      getStudentList() {

        this.queryParamsStudent.deptId = this.$store.state.user.deptId;
        listStudent(this.queryParamsStudent).then(response => {
          this.studentList.push({
            "id": "100",
            "userName": "全部学生"
          })
          this.studentList.push(...response.rows)


        });
      },



      /** 查询课程表列表 */
      getList() {

        this.loading = true;
        this.queryParams.deptId = this.$store.state.user.deptId;

        listScheduling(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.schedulingList = response.rows;
          this.total = response.total;
          this.loading = false;




        });
      },

      // 表单重置
      reset() {
        this.queryForm = {
          id: null,
          deptId: null,
          className: null,
          classCourse: null,
          classCapacity: null,
          classAskforleave: null,
          classNoyet: null,
          classWorkOut: [],
          classCirculate: null,
          classStart: null,
          classFinish: null,
          classHours: null,
          classTeacher: null,
          classAttendant: null,
          classRoom: null,
          classStudent: null,
          delFlag: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          remark2: null,
          remark3: null,
          remark4: null,
          remark5: null,
          remark6: null,
          remark7: null,
          remark8: null,
          remark9: null,
          remark10: null
        };
        this.resetForm("queryForm");
      },
      reset2() {
        this.form = {
          id: null,
          deptId: null,
          className: null,
          classCourse: null,
          classCapacity: null,
          classAskforleave: null,
          classNoyet: null,
          classWorkOut: null,
          classCirculate: null,
          classStart: null,
          classFinish: null,
          classHours: null,
          classTeacher: null,
          classAttendant: null,
          classRoom: null,
          classStudent: null,
          delFlag: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          remark2: null,
          remark3: null,
          remark4: null,
          remark5: null,
          remark6: null,
          remark7: null,
          remark8: null,
          remark9: null,
          remark10: null
        };
        this.resetForm("form");
      },







    }

  };
</script>
<style lang="scss" scoped>
  .content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    // background-color: skyblue;
  }

  .classimage {
    // height: 120px;
  }

  .contentbottom {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    // background-color: skyblue;
  }

  .classimage {
    height: 200px;
    width: 100%;
  }

  .item {
    flex: 0 0 calc((100% - 10px)/3);
    height: 100px;
    // background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
  }

  .itemright {
    flex: 0 0 calc((100% - 20px)/4);
    // height: 120px;
    // background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
  }

  .itemrightboot {
    flex: 0 0 calc((100% - 20px)/2);
    height: 280px;
    // background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
  }

  .item:nth-child(3n) {
    /* 去除第3n个的margin-right */
    margin-right: 0;
  }

  .xian {
    border-left: 2px solid #f3f6ff;
  }
</style>
